<template>
  <div id="cmsCate">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>栏目管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-col :span="24" align="right">
        <el-select
          v-model="selectedSite"
          placeholder="请选择站点"
          @change="onCmsSiteChange"
          size="small"
        >
          <el-option
            v-for="item in optionsCmsSite"
            :key="item.id"
            :label="item.domain"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          @click="handleAddCmsCate"
          size="small"
          type="success"
          icon="el-icon-circle-plus-outline"
          :disabled="AddCmsCateButtonDisabled"
        >添加栏目</el-button>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="tableCmsCate"
          :data="tableCmsCateData"
          border
          stripe
          fit
          highlight-current-row
          v-loading="tableCmsCateLoading"
          max-height="1200"
        >
          <el-table-column prop="name" label="栏目名称" width="320">
            <template slot-scope="scope">
              <span
                v-for="item in (scope.row.level - 1)"
                v-bind:key="item"
                style="padding-left: 18px;"
              ></span>
              <i v-if="scope.row.isParent == true" class="el-icon-caret-bottom"></i>
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="cateKind" label="类型" width="180">
            <template slot-scope="scope">{{ getCateKindLabel(scope.row.cateKind) }}</template>
          </el-table-column>
          <el-table-column prop="display" label="显示" width="180">
            <template slot-scope="scope">{{ getDisplayLabel(scope.row.display) }}</template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 1 ? 'success' : 'danger'"
                size="small"
                disable-transitions
              >{{ scope.row.status === 1 ? '正常' : '禁用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="80"></el-table-column>
          <el-table-column prop="created" label="创建日期" :formatter="dateFormat" width="180"></el-table-column>
          <el-table-column prop="updated" label="修改日期" :formatter="dateFormat" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="handleEditCmsCate(scope.$index, scope.row)"
                type="text"
                size="small"
              >编辑</el-button>
              <el-button
                @click="handleAddChildCmsCate(scope.$index, scope.row)"
                type="text"
                size="small"
              >添加子栏目</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog
      :title="dialogCmsCateTitle"
      :visible.sync="dialogCmsCateVisible"
      width="600px"
      @closed="dialogCmsCateClosed"
    >
      <el-form ref="formCmsCate" :model="modelCmsCate" status-icon :rules="rulesCmsCate">
        <el-form-item label="栏目名称" :label-width="formCmsCateLabelWidth" prop="name">
          <el-input v-model="modelCmsCate.name" autocomplete="off" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="栏目种类" :label-width="formCmsCateLabelWidth">
          <el-select v-model="modelCmsCate.cateKind" placeholder="请选择栏目种类">
            <el-option
              v-for="option in cateKindOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目显示" :label-width="formCmsCateLabelWidth">
          <el-select v-model="modelCmsCate.display" placeholder="请选择栏目显示">
            <el-option
              v-for="option in displayOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formCmsCateLabelWidth">
          <el-select v-model="modelCmsCate.status" placeholder="请选择状态">
            <el-option
              v-for="option in statusOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="排序"
          :label-width="formCmsCateLabelWidth"
          prop="sort"
          placeholder="排序编号越小越靠前"
        >
          <el-input v-model="modelCmsCate.sort" autocomplete="off" maxlength="11"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCmsCateVisible = false">取 消</el-button>
        <el-button type="primary" :loading="isButtonLoadingCmsCate" @click="onSubmitCmsCate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '../assets/js/nix.utils.js'
import { getAPI } from '../assets/js/resources.js'
var Qs = require('qs')

export default {
  name: 'cmsCate',
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('栏目名称不能为空'))
      } else {
        callback()
      }
    }
    var checkSort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('排序不能为空'))
      } else {
        callback()
      }
    }
    return {
      optionsCmsSite: [],
      selectedSite: null,
      siteId: null,
      tableCmsCateData: [],
      tableCmsCateLoading: false,
      AddCmsCateButtonDisabled: true,
      dialogCmsCateVisible: false,
      dialogCmsCateTitle: '添加栏目',
      cateKindOptions: [
        { label: '简介模块', value: 1 },
        { label: '文章模块', value: 2 },
        { label: '图片模块', value: 3 },
        { label: '下载模块', value: 4 },
        { label: '招聘模块', value: 5 },
        { label: '友链模块', value: 6 }
      ],
      displayOptions: [
        { label: '不显示', value: 1 },
        { label: '都显示', value: 2 },
        { label: '头部导航显示', value: 3 },
        { label: '底部导航显示', value: 4 }
      ],
      statusOptions: [{ label: '正常', value: 1 }, { label: '禁用', value: 2 }],
      modelCmsCate: {
        id: null,
        parentId: 0,
        name: '',
        sort: 666,
        isParent: false,
        level: 1,
        cateKind: 1,
        display: 1,
        status: 1,
        siteId: null
      },
      rulesCmsCate: {
        name: [{ validator: checkName, trigger: 'blur' }],
        sort: [{ validator: checkSort, trigger: 'blur' }]
      },
      formCmsCateLabelWidth: '80px',
      isButtonLoadingCmsCate: false
    }
  },
  methods: {
    // Table
    loadCmsSite() {
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_SITE_LIST'))
        .then(function(response) {
          if (response.data.status === 200) {
            that.optionsCmsSite = response.data.data.list
            if (that.optionsCmsSite && that.optionsCmsSite.length > 0) {
              that.selectedSite = that.optionsCmsSite[0]
              that.siteId = that.optionsCmsSite[0].id
              that.onCmsSiteChange()
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    onCmsSiteChange() {
      if (this.selectedSite) {
        this.loadtableCmsCateData()
        this.modelCmsCate.siteId = this.siteId
        this.AddCmsCateButtonDisabled = false
      }
    },
    loadtableCmsCateData() {
      this.tableCmsCateLoading = true
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_CATE_LIST'), {
          params: { siteId: that.siteId }
        })
        .then(function(response) {
          if (response.data.status === 200) {
            that.tableCmsCateData = response.data.data
            that.tableCmsCateLoading = false
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleAddCmsCate() {
      this.dialogCmsCateTitle = '添加栏目'
      this.dialogCmsCateVisible = true
    },
    handleAddChildCmsCate(index, row) {
      this.dialogCmsCateTitle = '添加栏目'
      this.dialogCmsCateVisible = true
      this.modelCmsCate.parentId = row.id
    },
    handleEditCmsCate(index, row) {
      // console.log(index, row);
      this.dialogCmsCateTitle = '修改栏目'
      this.dialogCmsCateVisible = true
      this.modelCmsCate.id = row.id
      this.modelCmsCate.parentId = row.parentId
      this.modelCmsCate.name = row.name
      this.modelCmsCate.sort = row.sort
      this.modelCmsCate.isParent = row.isParent
      this.modelCmsCate.cateKind = row.cateKind
      this.modelCmsCate.display = row.display
      this.modelCmsCate.status = row.status
      this.modelCmsCate.siteId = row.siteId
    },
    indexMethod(index) {
      return index + 1
    },
    dateFormat(row, column, cellValue, index) {
      var date = new Date(cellValue)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    getCateKindLabel(cateKind) {
      var label
      this.cateKindOptions.forEach(function(item, index) {
        if (item.value === cateKind) {
          label = item.label
        }
      })
      return label
    },
    getDisplayLabel(display) {
      var label
      this.displayOptions.forEach(function(item, index) {
        if (item.value === display) {
          label = item.label
        }
      })
      return label
    },
    // Edit
    onSubmitCmsCate() {
      this.isButtonLoadingCmsCate = true
      this.$refs.formCmsCate.validate(valid => {
        if (valid) {
          var that = this
          this.$axios({
            method: 'post',
            url: getAPI('API_POST_CMS_CATE_SAVE'),
            data: Qs.stringify(that.modelCmsCate)
          })
            .then(function(response) {
              if (response.data.status === 200) {
                that.$message({
                  message: '保存成功',
                  type: 'success'
                })
                that.isButtonLoadingCmsCate = false
                that.dialogCmsCateVisible = false
                that.loadtableCmsCateData()
              } else {
                that.$message.error(response.data.msg)
                that.isButtonLoadingCmsCate = false
              }
            })
            .catch(function(error) {
              console.log(error)
            })
        }
      })
    },
    resetForm() {
      this.modelCmsCate = {
        id: null,
        parentId: 0,
        name: '',
        sort: 666,
        isParent: false,
        level: 1,
        cateKind: 1,
        display: 1,
        status: 1,
        siteId: null
      }
      this.$refs.formCmsCate.resetFields()
    },
    dialogCmsCateClosed() {
      this.resetForm()
    }
  },
  created() {
    this.loadCmsSite()
  }
}
</script>

<style scoped>
</style>
